<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webuploaderDemo</title>
<link rel="stylesheet" href="staticresource/layui/css/layui.css">
<link rel="stylesheet" href="staticresource/webuploader/upload.media.css">
<link rel="stylesheet" href="staticresource/css/style.css">
<script src="staticresource/js/jquery-3.2.1.min.js"></script>
<script src="staticresource/layui/layui.all.js"></script>
<script src="staticresource/webuploader/webuploader.js"></script>
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">上传路径</label>
    <div class="layui-input-block">
      <input type="text"id="uploadPath"name="uploadPath" required  lay-verify="required" placeholder="上传路径" autocomplete="off" class="layui-input">
    </div>
  </div>
   <div class="layui-form-item">
    <label class="layui-form-label">选择文件</label>
    <div class="layui-input-block">
    <a class="layui-btn layui-btn-warm layui-btn-sm" id="demo1">选择文件</a>
    </div>
  </div>
  
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>
<script type="text/javascript">
var element;
var layer;
layui.use(['layer','element','code','form'], function(){
	  element = layui.element;
	  layer = layui.layer;
	  layui.code({
		  elem: 'pre', //默认值为.layui-code
		  encode: true, //是否转义html标签。默认不开启
		  about: false
	});
	  
	  var form = layui.form;
	  //监听提交
	  form.on('submit(formDemo)', function(data){
	    layer.msg(JSON.stringify(data.field));
	    return false;
	  });
	  var demo1 = $("#demo1");//上传实例dom
		// 实例化demo_Web_Uploader这个名字随便叫啊，我自定义的，页面上实例太多啦，
		var demo_Web_Uploader = WebUploader.create({
	        pick: {
	            id: demo1, //指定选择文件的按钮容器，不指定则不创建按钮。注意 这里虽然写的是 id, 不仅支持 id, 还支持 class, 或者 dom 节点。
	            label: "上传文件",//如果上传实例是个空dom，需要设置一下按钮的显示文字 
	        },
	        server: "file/uploadFileWihthPath",//上传服务端路径
	        flash:'staticresource/webuploader/Uploader.swf',//ie9一下会自动使用flash上传
	        auto:true//是否自动上传
		});
		//当文件上传成功时触发。
		demo_Web_Uploader.on('uploadSuccess',function(file,response){
			console.log(response);
			layer.msg('上传成功', {
				  icon: 1,
				  time: 2000
				});
		})
		demo_Web_Uploader.on('uploadBeforeSend',function(object ,data ,headers ){
			data.uploadPath = $("#uploadPath").val();
		})
		demo_Web_Uploader.on('beforeFileQueued',function(file){
			if($("#uploadPath").val()==''||!$("#uploadPath").val()){
				layer.msg('请输入上传路径', {
					  icon: 2,
					  time: 2000
					});
				return false;
			}
		})
		
});
</script>
</body>
</html>
